<template>
    <ul>
        <router-link to="/home/personalized/persona" custom v-slot="{navigate,isActive}">
          <li @click="navigate" >
              <span :class="isActive?'flims':''">个性推荐</span>
          </li>
        </router-link>
        <!-- <router-link to="/home/personalized/exclusive" custom v-slot="{navigate,isActive}">
          <li @click="navigate" >
              <span :class="isActive?'flims':''">专属定制</span>
          </li>
        </router-link> -->
        <router-link to="/home/personalized/songsheet" custom v-slot="{navigate,isActive}">
          <li @click="navigate" >
              <span :class="isActive?'flims':''">歌单</span>
          </li>
        </router-link>
        <router-link to="/home/personalized/RankingList" custom v-slot="{navigate,isActive}">
          <li @click="navigate" >
              <span :class="isActive?'flims':''">排行榜</span>
          </li>
        </router-link>
        <router-link to="/home/personalized/singer" custom v-slot="{navigate,isActive}">
          <li @click="navigate" >
              <span :class="isActive?'flims':''">歌手</span>
          </li>
        </router-link>
        <router-link to="/home/personalized/newmusic" custom v-slot="{navigate,isActive}">
          <li @click="navigate" >
              <span :class="isActive?'flims':''">最新音乐</span>
          </li>
        </router-link>
    </ul>
</template>
<style lang="less" scoped>
    ul{
        
        display: flex;
        width: 30%;
        height: 3.0625rem;
        line-height: 3.0625rem;
        min-width:500px;

        // border-bottom:1px solid rgba(200,200,200,0.25);
        z-index: 100;
        li{
            list-style: none;
            flex: 1;
            text-align: center;
            cursor: pointer;
        }
        span{
            padding-bottom: .80rem;
        }
    }
    .flims{
       color:pink;
       border-bottom: 2px solid pink;
       
   } 
</style>